Drag–and–Drop: How to Design for Ease of Use 拖放
拖放是什麼？
拖放是一種直接操作的互動方式，適用於以下任務：
- 分組：如把多個檔案放在一個資料夾中。
- 排序：如調整列表項的順序。
- 移動：如將一個檔案從一個資料夾移動到另一個。
- 調整大小：如改變表格列的寬度或圖片的大小。
基本步驟：
- 抓取物件：用滑鼠點選或觸屏長按選中目標。
- 拖動：保持按住並移動到目標位置。
- 釋放物件：鬆開滑鼠或手指，完成操作。
優點：
- 直觀：操作可見，容易理解。
- 高效：可以快速完成分組、移動、調整大小等任務。
缺點：
- 容易出錯：目標距離太遠或不精確時，可能導致放錯位置。
- 物理挑戰：長時間拖動容易疲勞，尤其在觸屏裝置上。
- 學習成本：使用者需要預期拖放功能的存在。
提高拖放易用性的設計建議
1. 明確標識拖放的可用性
- 抓取圖示：如三橫槓（類似選單圖示）或兩條線，表示可以拖動。
- 遊標變化：在滑鼠懸停時，遊標變成“手型”或帶箭頭的十字形。
- 方向提示：用箭頭圖示表示可移動方向（如水平或垂直）。
2. 清晰的反饋機制
- 抓住物件時，目標應突出顯示，例如增加陰影或顏色對比。
- 拖動時，顯示物件的“預覽”，如半透明的影像。
- 在釋放前，目標位置可以透過動畫或高亮來顯示。
3. 減少使用者出錯
- 吸附效果：當物件接近目標時，自動“吸附”到正確位置，減少精度要求。
- 動畫反饋：在拖動的過程中，其他物件會自動重新排列，模擬真實物理互動。
物件被抓取後的反饋設計
確認物件已被抓取：讓使用者明確知道已成功選中物件。
預覽釋放效果：在使用者放置前，展示釋放後的結果。
如何讓使用者知道物件已被抓取
視覺變化：抓取的物件與其他物件明顯不同，例如：
- 新增輪廓或對比色。
- 顯示陰影，讓物件“浮在”其他物件之上。
- 讓物件稍微傾斜或縮排。
- 顯示半透明的“影像”作為預覽，常用於檔案拖放。
示例：Trello 卡片在被拖動時會顯示輕微的陰影和角度變化，給使用者“懸浮”的視覺效果。同時，放置區域（Drop Zone）會動態調整大小、顏色或顯示預覽，類似磁鐵吸附的效果。
如何預覽放置效果
動畫提示：在物件被拖動到某個位置時，其他物件會讓出空間。
- 使用短動畫（約100毫秒）模擬物件移動，避免使用者感到突兀。
- 動畫中加入緩動效果，讓移動過程更自然。
觸發時機：最理想的觸發點是物件中心與目標邊緣重疊時。這樣既不顯得過於遲緩，也不會太敏感導致誤操作。
動畫預覽的關鍵是選擇正確的觸發時機。最佳方案是：當拖動物件的中心與目標物件的邊緣重疊時觸發重排動畫。這樣可以避免互動過於遲緩或過於敏感的問題。
磁吸效果（Magnetism and Snapping in Place）
為減少拖放對精確性的需求，可增加磁吸效果：當物件接近目標區域時，自動“吸附”到正確位置。放置區域可以比實際目標稍大（即“隱形邊界”），幫助使用者快速完成拖放操作。
檔案上傳示例：使用者在拖動檔案到上傳區域時，區域會在檔案靠近時高亮並啟用，即使檔案未完全進入目標範圍。
移動裝置的拖放設計：在觸屏裝置上，拖放設計需要特別考慮：
避免誤操作：
確保拖放區域大於1cm×1cm。
區分“點選”、“滑動”和“抓取”，可透過延遲（幾毫秒）來實現。
提供觸覺反饋：
使用者抓取物件時，裝置可以輕微震動提示。物件接近放置區域時，可再次震動確認。
Instagram 示例：使用者在新增貼紙時，透過輕按並拖動貼紙到目標位置，手指感受到輕微的震動提示已抓取和放置成功。
